<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>添加字段</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		.importExcel_main_contaienr{
			width: 485px;
			margin: 0 auto;
			padding: 32px 32px 32px 0;
			background: #fff;
		}
		.importExcel_title{
			font-size: 17px;
			width: 100%;
			text-align: center;
			margin-top: 2px;
			font-weight: 600;
			line-height: 24px;
			letter-spacing: 1px;
			padding-left: 20px;
		}

		.importExcel_from_contaienr{
			margin-top: 24px;
		}
		.importExcel_button_container{
			display: flex;
			justify-content: space-between;
			padding-top: 10px;
			align-items: center;
		}
		.importExcel_button_container span{
			color: #777;
			font-size: 14px;
			cursor: pointer;
			margin-left: 32px;
		}
		.importExcel_button_content{
			display: flex;
			justify-content: flex-end;
			flex: 1;
			align-items: center;
		}
		.lable_list_container{
			position: relative;
		}
		.lable_list_container svg{
			width: 14px;
			height: 14px;
			position: absolute;
			right: -20px;
			top: 13px;
			cursor: pointer;
		}
		.add_lable_container{
			cursor: pointer;
			color: #1890ff;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<form class="layui-form" action="">
		<div class="importExcel_main_contaienr">
			 <h2 class="importExcel_title">添加字段</h2>
			 <div class="importExcel_from_contaienr">
			 	<div class="layui-form-item">
			 	  <label class="layui-form-label">字段名称</label>
			 	  <div class="layui-input-block">
			 	        <input type="text" id="title" required  lay-verify="required" placeholder="输入名称不超过五个字" autocomplete="off" class="layui-input">
			 	  </div>
			 	</div>
			 	<div class="layui-form-item">
			 		<label class="layui-form-label">字段类型</label>
			 		<div class="layui-input-block" id="fieldType">
			 			<input lay-filter="fieldType" type="radio" name="fieldType" value="文本" title="文本" checked>
			 			<input lay-filter="fieldType" type="radio" name="fieldType" value="选择" title="选择">
			 		</div>
			 	</div>
			 	<div class="AddCustom_selectName_container" style="display: none;">
			 		<!-- 循环 -->
			 		<div class='layui-form-item lable_list_container'>
			 		  <label class='layui-form-label'></label>
			 		  <div class='layui-input-block'>
			 		    <input type='text' name='content' required lay-verify='required' placeholder='选项' autocomplete='off' class='layui-input'></div>
			 		  <svg t='1614155697613' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2643' width='30' height='30'>
			 		    <path d='M0 512.279845C0 229.234931 229.375931 0 511.999845 0s511.999845 229.235931 511.999845 511.719845v0.56a511.068845 511.068845 0 0 1-149.806955 362.00589A511.603845 511.603845 0 0 1 511.999845 1023.99969C228.816931 1023.99969 0 794.762759 0 512.279845z m546.233835 0l178.827945-178.734946a23.272993 23.272993 0 0 0 0-33.13999l-1.093999-1.071a23.272993 23.272993 0 0 0-33.13999 0L511.999845 478.579855 333.171899 299.333909a23.272993 23.272993 0 0 0-33.13999 0l-1.093999 1.07a23.272993 23.272993 0 0 0 0 33.13999l178.827945 179.269946L298.93791 691.549791a23.272993 23.272993 0 0 0 0 33.11699l1.093999 1.093999a23.272993 23.272993 0 0 0 33.13999 0L511.999845 547.024834 690.826791 725.75978a23.272993 23.272993 0 0 0 33.13999 0l1.094999-1.093999a23.272993 23.272993 0 0 0 0-33.11699l-178.827945-179.269946z' p-id='2644' fill='#999'></path>
			 		  </svg>
			 		</div>
			 		<!-- 添加 -->
			 		<div class="layui-form-item">
			 		  <label class="layui-form-label"> </label>
			 		  <div class="layui-input-block add_lable_container">
			 		  	<span>添加选项</span>
			 		  </div>
			 		</div>
			 	</div>
			 	
			 </div>
			 <div class="layui-form-item importExcel_button_container">
			 	<span></span>
			 	<div class="importExcel_button_content">
			 		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">取消</button>
			 		<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="check()">确定</button>
			 	</div>
			 	
			 </div>
		</div>	
	</form>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script src="/js/ajax.js"></script>
	<script>

	//表单
	layui.use('form', function(){
		var form = layui.form;

	  //监听提交
	  form.on('submit(formDemo)', function(data){
	  	layer.msg(JSON.stringify(data.field));
	  	return false;
	  });
	  // 监听点击单选
	  form.on('radio(fieldType)', function (data) {

	  	if ($('#fieldType input[name="fieldType"]:checked').val() == "文本") {
	  		$(".AddCustom_selectName_container").hide();
	  	}else if($('#fieldType input[name="fieldType"]:checked').val() == "选择"){
	  		$(".AddCustom_selectName_container").show();
	  	}

	  	form.render();
	  });

	});
	// 上传
	layui.use('upload', function(){
	  var upload = layui.upload;
	   
	  //执行实例
	  var uploadInst = upload.render({
	    elem: '#test1' //绑定元素
	    ,url: '/upload/' //上传接口
	    ,done: function(res){
	      //上传完毕回调
	    }
	    ,error: function(){
	      //请求异常回调
	    }
	  });
	});
	</script>
	<script type="text/javascript">
		$('body').on('click','.icon',function(e){
			console.log(this);
			$(this).parent().remove();
		})
		let $div = "<div class='layui-form-item lable_list_container'><label class='layui-form-label'></label><div class='layui-input-block'><input type='text' name='content' required lay-verify='required' placeholder='选项' autocomplete='off' class='layui-input'></div><svg t='1614155697613' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2643' width='30' height='30'><path d='M0 512.279845C0 229.234931 229.375931 0 511.999845 0s511.999845 229.235931 511.999845 511.719845v0.56a511.068845 511.068845 0 0 1-149.806955 362.00589A511.603845 511.603845 0 0 1 511.999845 1023.99969C228.816931 1023.99969 0 794.762759 0 512.279845z m546.233835 0l178.827945-178.734946a23.272993 23.272993 0 0 0 0-33.13999l-1.093999-1.071a23.272993 23.272993 0 0 0-33.13999 0L511.999845 478.579855 333.171899 299.333909a23.272993 23.272993 0 0 0-33.13999 0l-1.093999 1.07a23.272993 23.272993 0 0 0 0 33.13999l178.827945 179.269946L298.93791 691.549791a23.272993 23.272993 0 0 0 0 33.11699l1.093999 1.093999a23.272993 23.272993 0 0 0 33.13999 0L511.999845 547.024834 690.826791 725.75978a23.272993 23.272993 0 0 0 33.13999 0l1.094999-1.093999a23.272993 23.272993 0 0 0 0-33.11699l-178.827945-179.269946z' p-id='2644' fill='#999'></path></svg></div>"
		$('.add_lable_container').click(function(){
			$(this).parent().before($div);
		})


		function check(){
	  		var title = $("#title").val();
			if ($('#fieldType input[name="fieldType"]:checked').val() == "文本") {
		  		var status = 1;
		  	}else if($('#fieldType input[name="fieldType"]:checked').val() == "选择"){
		  		var status = 2;
		  		var arr = new Array();
		  		var error = 1;
				$("input[name='content']").each(function(j,item){
					if(!item.value){
						error = error+1;
					}else{
						arr.push(item.value);
					}
				});
		  	}
		  	if(error>1){
		  		tusi("必填项不能为空");
		  		return false;
		  	}
			myAjaxPost(false, true, 'add_custom_fields.html',{ status:status,title:title,content:arr}, function (resp) {
				if(resp.status == "success"){
					layer.msg(resp.msg,{
				       	time:2000,
				       	offset:"t",
				       	icon: '1',
			         	end:function () {
			         		parent.window.location.href = "index.html";
			         	}
			     	})
				}else{
					layer.msg(resp.msg);
				}
			})
		}
	</script>
</body>
</html>